
<template>
  <div>
    <business-table
        :businessTableData="businessTableData"
        :tableChildData="tableChildData"
        type="expand"
        v-loading="businessTableData.tableProp.loading"
    />
  </div>
</template>
<script>
export default {
  components: {},
  props: ['tableData','tableChildData'],
  data() {
    return {
      initDialogData: null,//存储dialog原始数据，初始化要用
      businessTableData: {
        //需要显示组件
        componentType: {
          title: false,//CommonTitle 组件是否显示
          tabs: false,//CommonTabs 组件是否显示
          table: true,//CommonTable 组件是否显示
          dialog: false,//CommonDialog 组件是否显示
        },
        //组件需要的接口和初始化方法名
        interfaceName: {
          init: 'stationAllocationGet',//初始化接口名称
          initMethodName: 'initData',//初始化方法名 默认初始化名称
          add: '',//新增接口名称
          edit: '',//修改接口名称
          del: '',//删除接口
          status: '',//修改状态名称
          oneData: '',//读取一条接口名称
        },

        //CommonTable组件数据
        tableProp: {

          loading: false,//加载中 true  加载完成false
          class: '',//表格顶部div class
          index: true,//是否需要有序号
          selection: false,//是否是多选框
          selectionVal: 'id',// 开启多选获取的字段
          selectionId: [],// 开启多选后，选择哪几条
          isPage: false, //是否分页
          current_page: 1,//单前第几页
          pageSize: 30,//一页数量
          pageMethod: 'tablePageClick',//分页方法
          pageTotal: 10,//分页总数
          statusName: 'status',//状态字段名 已启动未启动等状态按钮显示还是隐藏
          //字段配置
          tableListProp: [
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '钢瓶型号',//表头
              field: 'a1',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '120',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'chineseCharacters',
            },
            {
              show: true,//是否显示 true 显示 false 不显示
              title: '数量',//表头
              field: 'a2',//字段
              isWidth: false,//是否是固定长度 true 是 false 否
              width: '120',//长度
              headerAlign: 'center',//表头居中
              align: 'center',//内容居中
              tooltip: true,//是否超长tip
              class: '',//表格class
              type: 'chineseCharacters',
            }],
          //操作按钮配置
          operate: [],
          //table 数据
          tableData:[]

        },

      }
    };
  },
  mounted() {
    //把dialog原始数据存储
    if(this.businessTableData.componentType.dialog){
      this.initDialogData = JSON.parse(JSON.stringify(this.businessTableData.dialogProp.formData));
    }
    //初始化
    this.initData();
  },
  methods: {
    //表格 第几行显示什么颜色
    tableRowClassName({rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      }
      return '';
    },
    //初始化
    initData() {
      this.businessTableData.tableProp.loading = true;
      let params={
        station_id:this.tableData.id
      };
      //当前第几页
      params.page = this.businessTableData.tableProp.current_page;

      //调用初始化接口
      if(this.businessTableData.interfaceName.init!==''){
        this['$'+this.businessTableData.interfaceName.init](params).then((result) => {
          this.businessTableData.tableProp.current_page = result.current_page;//单前页
          this.businessTableData.tableProp.pageTotal = result.total;//总数
          this.businessTableData.tableProp.pageSize = result.per_page;//每页多少条
          this.tableData.tableChildData = result.map(item => ({
            a1:item.name,//钢瓶型号
            a2:item.num,//数量
          }));
          this.businessTableData.tableProp.loading = false;
        })
      }
    },
    //CommonTitle组件 添加账号 按钮点击
    addTitleClick(item) {
      this.businessTableData.dialogProp.formData = JSON.parse(JSON.stringify(this.initDialogData));
      this.businessTableData.dialogProp.dialogTitle = item.name;
      this.businessTableData.dialogProp.isDialog = true;
      this.businessTableData.dialogProp.loading = false;
    },
    //CommonTabs组件 点击搜索 点击tabs状态 时候调用的方法
    tabsClick() {
      if(this.businessTableData.tableProp!=undefined){
        this.businessTableData.tableProp.current_page=1;
      }
      this.initData();
    },


    //CommonTable组件
    //编辑按钮
    tableEditClick(row,item){
      this.businessTableData.dialogProp.formData = JSON.parse(JSON.stringify(this.initDialogData));
      this.businessTableData.dialogProp.dialogTitle = item.name;
      let params = {id: row.id};
      this.businessTableData.dialogProp.loading=true;
      this.businessTableData.dialogProp.isDialog = true;
      if(this.businessTableData.interfaceName.oneData!==''){
        this['$'+this.businessTableData.interfaceName.oneData](params).then((result) => {
          console.log(result)

          this.businessTableData.dialogProp.loading=false;
        })
      }
    },

    //删除按钮
    tableDelClick(row){
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        if(this.businessTableData.interfaceName.del!==''){
          this['$'+this.businessTableData.interfaceName.del](data).then(() => {
            this.$message.success('删除成功');
            this.initData();
          })
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 分页按钮
    tablePageClick(page) {
      this.businessTableData.tableProp.current_page = page;
      this.initData();
    },

    //CommonDialog组件
    //取消按钮
    dialogCancel(){
      this.businessTableData.dialogProp.isDialog = false;
    },

    //确定按钮
    dialogDetermine(){
      this.$refs['businessCommonDialog'].$refs[this.businessTableData.dialogProp.formRef].validate((valid) => {
        if (valid) {
          let data = {
          };
          if (this.businessTableData.dialogProp.formData.id == '') {
            if(this.businessTableData.interfaceName.add!==''){
              this['$'+this.businessTableData.interfaceName.add](data).then(() => {
                this.$message.success('提交成功');
                this.businessTableData.dialogProp.isDialog = false;
                this.initData();
              })
            }
          } else {
            if(this.businessTableData.interfaceName.edit!=='') {
              this['$'+this.businessTableData.interfaceName.edit](data).then(() => {
                this.$message.success('修改成功');
                this.businessTableData.dialogProp.isDialog = false;
                this.initData();
              })

            }

          }
        } else {
          console.log('验证没过!!');
          return false;
        }
      })
    }

  },
};
</script>
<style lang="scss" scoped></style>}

